<style type="text/css">
.block{
	display:block;
	width:100%;
	}
.flex2
{
	position:relative;
	display: inline-block!important;
	/*float:left;*/
/*	display:inline;/**/
	width:48%;
	margin::0px;
	padding:0px;
	}
.flex2 textarea{
	display:block;
	}
.table
{	
	width:100%;
	font-family:Verdana, Geneva, Tahoma, sans-serif;
	font-size:12px;
}
.table tr{
	vertical-align:top;
}
/*Textarea efects*/
.table textarea,
.table textarea.normal
{
	background-color:#fff;
	z-index:2;
	height:100%;
	width:100%;
	display:block;
}
.table textarea.morph
{
	position:absolute;width:90% ;height:90%;top:10%;left:5%;
}
.table label.morph
{
	position:absolute;width:90% ;height:90%;top:5%;left:5%;
	color:#fff;
	background-color:#000;
	padding:3px;
	border-radius:5px;
	border:1px solid #ccc;
}
.table textarea:focus,
.table input:focus
{
	outline:1px solid green;
}
.td_no_focus{
	opacity:0.5;
	color:#CCC !important;
}
.table img{padding:0px;margin:0px;position: relative;}
.table .titulo:before,
.table .titulo:after
{
	content:'"';
	color:red;
}
</style>
<div style="position:relative">
<form name="form1" method="post" action="<?=PHP_SELF?>">
	<input type="hidden" name="id" value="<?=$this->getData('id')?>" />
	<table class="table">
		<tr>
			<th><span class="titulo"><?=mb_convert_case($this->getData('titulo'),MB_CASE_TITLE)?></span></th>
			<td rowspan="4" style="width: 30%;text-align:center">
				<img src="<?php echo BASE_URL_FULL .'/'.$this->getData('imagen');?>" alt="Imagen" height="128" id="show_image_selected" />
			</td>
		</tr>
		<tr>
			<td style="height: 45px" >
				<label for="receta_titulo">Titulo:</label>
				<input id="receta_titulo" type="text" class="block" name="receta[titulo]" value="<?=$this->getData('titulo')?>"/>
			</td>
		</tr>
		<tr >
			<td style="width: 50%">
				<label for="receta_proteinas">Numero de Porciones:</label>
				<input id="receta_proteinas" maxlength="7" size="10" type="text" name="receta[porciones]" value="<?=$this->getData('porciones')?>"  />
			</td>
		</tr>
		<tr>
			<td>
				<label for="receta_ingredientes" class="block">ingredientes:</label>
				<textarea id="receta_ingredientes"  class="block" name="receta[ingredientes]"><?=$this->getData('ingredientes')?></textarea>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<label for="receta_imagen">Url Imagen</label>
				<input id="receta_imagen" class="inline-block" type="text" name="receta[imagen]" value="<?=$this->getData('imagen')?>" style="width:60%" /> 
				<button type="button" onclick="buscar_imagen()">buscar : </button>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<label for="receta_salsa" class="block">Salsa:</label>
				<textarea id="receta_salsa" class="block" name="receta[salsa]"><?=$this->getData('salsa')?></textarea>
			</td>

		</tr>
		<tr>
			<td colspan="2">
				<label for="receta_preparacion">Preparacion:</label>
				<textarea id="receta_preparacion" class="block" name="receta[preparacion]"><?=$this->getData('preparacion')?></textarea>
			</td>
		</tr>
		<tr>
			<th colspan="2"><button type="submit">Guardar</button></th>
		</tr>
	</table>
</form>
</div>
<script type="text/javascript">
function elegir_imagen(url)
{
	document.getElementById('receta_imagen').value=url;
	document.getElementById('show_image_selected').src = "<?php echo BASE_URL_FULL?>/"+url;
	return true;
}
function buscar_imagen()
{
	window.open ("<?php echo BASE_URL_FULL?>/admin/elegir_imagen.php?dir=/image/recet", "ElegirImagen","status=0,toolbar=0");
}
</script>